<template>
    <div style="height: 700px;background: #fff;">
        <el-container style="border: 1px solid #eee">
            <el-aside width="200px;">
                <el-menu background-color="#303946" text-color="#fff" active-text-color="#ffd04b" :default-openeds="['1']">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-message"></i>导航
                        </template>
                        <el-menu-item-group>
                            <el-menu-item v-for="route in routes" :key="route.path" :index="route.path" @click="navigate(route.path)">
                                <i :class="getIconClass(route)"></i>
                                {{ route.name }}
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import { defineComponent } from 'vue';
import studentAdd from '@/page/admin/studentAdd/index.vue';
import studentList from '@/page/admin/studentlist/index.vue';
import loginLog from '@/page/admin/loginlog/index.vue';
import adminInfo from '@/page/admin/adminInfo/index.vue';
import setTime from '@/page/admin/setTime/index.vue';

export default defineComponent({
    name: 'AdminTest',
    components: {
        studentAdd,
        studentList,
        loginLog,
        adminInfo,
        setTime
    },
    data() {
        return {
            routes: [
                { name: '新增成员', path: '/studentAdd', icon: 'el-icon-circle-plus' },
                { name: '查看成员', path: '/studentlist', icon: 'el-icon-s-data' },
                { name: '登录日志', path: '/loginlog', icon: 'el-icon-document' },
                { name: '管理员信息', path: '/adminInfo', icon: 'el-icon-user-solid' },
                { name: '设置时间', path: '/setTime', icon: 'el-icon-setting' },
                { name: '代签管理', path: '/daiqian', icon: 'el-icon-edit-outline' },
            ],
        };
    },
    methods: {
        navigate(path) {
            if (this.$route.path === path) {
                // 如果目标路径与当前路径相同，则不进行导航
                return;
            }
            try {
                this.$router.push(path);
            } catch (error) {
                console.error("导航失败:", error);
                this.$message.error("导航失败，请重试！");
            }
        },
        getIconClass(route) {
            return route.icon;
        }
    }
});
</script>

<style>
.el-aside{
    background-color: #303946;
    height: 100%;
}
.el-menu-item:hover {
    background-color: #303946;
}
.el-container{
    height: 100%;
}
.el-table .cell {
    color: #606266;
    font-size: 14px;
}
</style>